<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>用户注册</title>
  <!-- 引入Bootstrap CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
    .registration-container {
      max-width: 600px;
      margin: 2rem auto;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      background-color: #ffffff;
    }
    .form-icon {
      color: #6c757d;
      font-size: 1.2rem;
    }
    .avatar-preview {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #dee2e6;
      margin-bottom: 1rem;
    }
    .form-control:focus {
      border-color: #80bdff;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    .btn-submit {
      background-color: #0d6efd;
      color: white;
      transition: all 0.3s ease;
    }
    .btn-submit:hover {
      background-color: #0b5ed7;
    }
  </style>
</head>
<body class="bg-light">
<div class="registration-container">
  <h2 class="mb-4 text-center">后台用户增加</h2>
  <form action="${pageContext.request.contextPath}/acl_userAdd" enctype="multipart/form-data" method="post" >
    <!-- 姓名 -->
    <div class="mb-3">
      <label class="form-label"><i class="bi bi-person-fill form-icon"></i> 用户名</label>
      <input type="text" class="form-control" name="username" placeholder="请输入姓名" required>
    </div>

    <!-- 密码 -->
    <div class="mb-3">
      <label class="form-label"><i class="bi bi-lock-fill form-icon"></i> 密码</label>
      <input type="password" class="form-control" name="password" placeholder="请输入密码" required>
    </div>


    <!-- 昵称 -->
    <div class="mb-3">
      <label class="form-label"><i class="bi bi-phone-fill form-icon"></i></label>
      <input type="tel" class="form-control" name="nickname" placeholder="昵称" required>
    </div>

    <!-- 头像上传 -->
    <div class="mb-3">
      <label class="form-label"><i class="bi bi-image-fill form-icon"></i>头像</label>
      <div class="d-flex align-items-center">
        <img src="default-avatar.jpg" alt="头像预览" class="avatar-preview me-3" id="avatarPreview">
        <input type="file" class="form-control" name="image" accept="image/*" onchange="previewImage(event)">
      </div>
    </div>

    <%--供应商回显--%>
    <div class="mb-3">
      <label class="form-label"><i class="bi bi-shop-window form-icon"></i>供应商</label>
      <select class="form-select" name="sid">
        <option value="0">请选择供应商</option>
        <c:forEach items="${supplierCha}" var="supplier">
          <option value="${supplier.supplier_id}">${supplier.supplier_name}</option>
        </c:forEach>
      </select>
    </div>
    <!-- 状态 -->
    <div class="mb-4">
      <label class="form-label"><i class="bi bi-toggle-on form-icon"></i> 账户状态</label>
      <select class="form-select" name="is_deleted">
        <option value="1">启用</option>
        <option value="0">禁用</option>
      </select>
    </div>

    <!-- 操作按钮 -->
    <div class="d-grid gap-2">
      <button type="submit" class="btn btn-submit btn-lg">提交注册</button>
      <button type="reset" class="btn btn-outline-secondary btn-lg">重置</button>
    </div>
  </form>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
  function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function(){
      const preview = document.getElementById('avatarPreview');
      preview.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  }
</script>
</body>
</html>
